import { Table, Space, Card, Button, Form, Input, Select } from 'antd'
import { useStore } from '@/store'
import React, { useEffect, useState } from 'react'
// import { useSearchParams } from 'react-router-dom'
import { http } from '@/utils'
import { dict_data } from '@/dict'
import Addorupdatafreq from './commponents/Addorupdatafreq'


const FreqConfig = () => {
  const [form] = Form.useForm()
  const [freqConfigData, setFreqConfigData] = useState([])

  const { loginStore } = useStore()
  const freqTypeOpt = dict_data[1011].map(item => { return { label: item.dictName, value: item.dictCode } })

  const [params, setParams] = useState({
    pageNum: 1,
    pageSize: 20
  })
  // // 配置品种预警组
  let childFreqRef = React.createRef()
  const handleAddmodal = (e, data) => {
    childFreqRef.current.openModalOpen(data)
  }
  // 刷新列表
  const changeConfigModal = (msg) => {
    setParams({
      ...params
    })
  }
  /* 表单筛选功能实现 */
  const onSeach = (values) => {
    // 数据处理
    const _params = { ...values }
    // 修改params数据 引起接口的重新发送 对象的合并是一个整体覆盖 改了对象的整体引用
    setParams({
      ...params,
      ..._params,
      pageNum: 1,
    })
  }
  const pageChange = (page, pageSize) => {
    setFreqConfigData([])
    setParams({
      ...params,
      pageSize: pageSize,
      pageNum: page
    })
  }
  useEffect(() => {
    const getList = async () => {
      const res = await http.post('/alarm/deliversign/getFreqConfigByPage', { userId: loginStore.userId, ...params })
      console.log('周期列表-', res.body)
      const { list, total } = res.body
      setFreqConfigData({
        list: list,
        count: total
      })
    }
    getList()
  }, [params, loginStore])
  const columns = [
    { title: '编号', dataIndex: 'id', },
    { title: '周期名称', dataIndex: 'freqName', },
    { title: '周期类型', dataIndex: 'freqTypeName', },
    {
      title: '操作',
      render: data => {
        return (
          <Space size="middle">
            <Button size="small" onClick={(e) => handleAddmodal(e, data)}>编辑</Button>
          </Space>
        )
      },
      fixed: 'right'
    }
  ]
  return (
    <>
      <Card title="周期配置">
        <Form
          onFinish={onSeach}
          layout='inline'
          form={form}
        >
          <Form.Item label="周期名称" name="freqName" >
            <Input
              allowClear
              placeholder='请输入周期名称'
              style={{ width: 200 }}
              onChange={form.submit}
            />
          </Form.Item>
          <Form.Item label="周期类型" name="freqType" >
            <Select
              allowClear
              placeholder='请选择周期类型'
              style={{ width: 200 }}
              options={freqTypeOpt}
              onChange={form.submit}
            ></Select>
          </Form.Item>
          <Form.Item >
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 20 }} onClick={(e) => handleAddmodal(e, {})}>
              添加
            </Button>
          </Form.Item>
        </Form>
        <Table
          style={{ marginTop: 20 }}
          rowKey="id"
          size='middle'
          columns={columns}
          dataSource={freqConfigData.list}
          pagination={
            {
              size: 'default',
              showQuickJumper: true,
              showSizeChanger: true,
              pageSize: params.pageSize,
              total: freqConfigData.count,
              onChange: pageChange,
              current: params.pageNum,
              showTotal: (total, range) => `共 ${total} 条`,
            }
          }
          bordered
        />
      </Card >
      <Addorupdatafreq onRef={childFreqRef} changeConfigModal={changeConfigModal} />
    </>
  )
}

export default FreqConfig